<template>
    <div class="table">
        <div class="content-common">
            <el-row type="flex" class="row-bg" justify="space-between" style="padding-bottom:20px">
				<el-col :span="6"><el-button type="primary"  @click="prepage()">返回</el-button></el-col>

				<el-col :span="10" style="text-align:right">
				

				<el-row>
						<el-col :span="6">
							<el-button type="primary" icon="download" @click="xiazaimuban">下载模板</el-button>
							
						</el-col>
						<el-col :span="6">
							
							<el-button type="primary"  @click="handleEdit()">新增单条</el-button>
						</el-col>
						<el-col :span="6">
							<el-upload
							:headers="headers"
							  :action="daoruUrl"
							  :show-file-list="false"
								:on-success="filesuccess"
							  >
							  <el-button  type="primary">导入多条</el-button>
							</el-upload>

						</el-col>
						<el-col :span="6">
							<el-button type="primary" icon="download" @click="daochuexcell">导出记录</el-button>
						</el-col>
					</el-row>
           			
             </el-col>
				<!-- <el-col :span="3" style="text-align:right" v-if="status==0">
					<el-button type="primary" icon="plus" @click="handleEdit2()">新增</el-button>
				</el-col> -->
			</el-row>

			<div style="font-size:18px;text-align:center;font-weight:bold;padding-bottom:8px">
			{{topInfo.stnm}}径流小区植被郁闭度/盖度和土壤水分(TDR)观测记录表
		   </div>
		  <div>

			
			      
			<span style="margin-right:12px">观测日期: <span style="color:red">{{topInfo.obDate}}</span>  </span>
			
			<span style="margin-right:12px">观测人:<span style="color:red">{{topInfo.observerName}}</span></span>
			<span>审核人:<span style="color:red">{{topInfo.reviewerName}}</span></span>
		  </div>
			<el-table
			   :data="tableData"
			    border
				:span-method="objectSpanMethod"
			    class="table-common"
			    header-cell-class-name="table-header"
			   style="width: 100%">
			   <el-table-column
			     prop="areaCode"
				 align="center"
			     label="小区号"
			    >
			   </el-table-column>
			   <el-table-column
			     prop="frequency"
				 align="center"
			     label="测次"
			    >
				
				
				
			   </el-table-column>
			   <el-table-column
				align="center"
			     prop="point"
			     label="测点"
			    >
				<template #default="scope">
				    <span v-show="scope.row.point==1">坡上</span>
					<span v-show="scope.row.point==2">坡中</span>
					<span v-show="scope.row.point==3">坡下</span>
				</template>
			   </el-table-column>
			   <el-table-column
			     
			   	 align="center"
			     label="相片编号"
			    >
				<el-table-column
				  prop="imageLush"
								 align="center"
				  label="郁闭度"
				 >
				</el-table-column>
				<el-table-column
				  prop="imageCoverage"
								 align="center"
				  label="盖度(%)"
				 >
				</el-table-column>
			   </el-table-column>
			   
			   <el-table-column
			     
			   	align="center"
			     label="目估郁闭度/覆盖度"
			    >
				<el-table-column
				  prop="visualLush"
								 align="center"
				  label="郁闭度"
				 >
				</el-table-column>
				<el-table-column
				  prop="visualCoverage"
								 align="center"
				  label="植物盖度(%)"
				 >
				</el-table-column>
				<el-table-column
				  prop="visualGroundCover"
								 align="center"
				  label="地面盖度(%)"
				 >
				</el-table-column>
			   </el-table-column>
			  
			  
			   <el-table-column
			     prop="avgHeight"
				 align="center"
			     label="植被平均高度(m)"
			    >
			   </el-table-column>
			   
			   <el-table-column
			    
			   	 align="center"
			     label="土壤水分(%)"
			    >
				<el-table-column
				   prop="measuringDepth"
								 align="center"
				   label="测量深度(cm)"
				  >
				 </el-table-column>
				<el-table-column
								 prop="soilMoisture1"
				align="center"
								 label="水分1"
								>
				 </el-table-column>
				 <el-table-column
								  prop="soilMoisture2"
				 align="center"
				  label="水分2"
				 >
				</el-table-column>
				<el-table-column
				   prop="soilMoisture3"
				align="center"
				   label="水分3"
				  >
				 </el-table-column>
			   </el-table-column>
			   
			   
				<el-table-column
				   prop="remark"
				align="center"
				   label="备注"
				  >
				 </el-table-column>
			    <el-table-column label="操作" width="200" align="center" >
			      <template #default="scope">
			          <el-button type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
			          <el-button type="danger"   @click="handleDelete(scope.row)">删除</el-button>
			  		 
			      </template>
			    </el-table-column>
			 </el-table>
			
        </div>
		
		
		<el-dialog :title="logTitle2"  v-model="detaillog" width="500px">
		    <el-form ref="innerform" :rules="rules" :model="innerform" label-width="150px" label-position="top">
		       <el-row type="flex" justify="space-between">
		           <el-col :span="11">
					  
		       		<el-form-item label="小区号" prop="areaCode">
		       			
						<el-select v-model="innerform.areaCode" placeholder="小区号">
						    <el-option
						      v-for="item in xiaoqudata"
						      :key="item.stnm+item.areaCode+'号'"
						      :label="item.stnm+item.areaCode+'号'"
						      :value="item.areaCode">
						    </el-option>
						  </el-select>
		       		</el-form-item>
		       	</el-col>
		           <el-col :span="11">
		       		<el-form-item label="测次" prop="frequency">
		       		    <el-input v-model="innerform.frequency" placeholder="测次"></el-input>
		       		</el-form-item>
		       		
		       	</el-col>
		       </el-row>
			   <el-row type="flex" justify="space-between">
			       <el-col :span="11">
			   		<el-form-item label="测点" prop="point">
			   		    <el-input v-model="innerform.point" placeholder="测点(坡上、坡中、坡下)"></el-input>
			   		</el-form-item>
			   	</el-col>
			       <el-col :span="11">
			   		<el-form-item label="相片识别郁闭度">
			   		    <el-input v-model="innerform.imageLush" placeholder="相片识别郁闭度"></el-input>
			   		</el-form-item>
			   		
			   	</el-col>
			   </el-row>
			   <el-row type="flex" justify="space-between">
			       <el-col :span="11">
			   		<el-form-item label="相片盖度(%)">
			   		    <el-input v-model="innerform.imageCoverage" placeholder="相片盖度(%)"></el-input>
			   		</el-form-item>
			   	</el-col>
			       <el-col :span="11">
			   		<el-form-item label="目估郁闭度">
			   		    <el-input v-model="innerform.visualLush" placeholder="目估郁闭度"></el-input>
			   		</el-form-item>
			   		
			   	</el-col>
			   </el-row>
			   <el-row type="flex" justify="space-between">
			       <el-col :span="11">
			   		<el-form-item label="目估植物盖度(%)">
			   		    <el-input v-model="innerform.visualCoverage" placeholder="目估植物盖度(%)"></el-input>
			   		</el-form-item>
			   	</el-col>
			       <el-col :span="11">
			   		<el-form-item label="目估地面盖度(%)">
			   		    <el-input v-model="innerform.visualGroundCover" placeholder="目估地面盖度(%)"></el-input>
			   		</el-form-item>
			   		
			   	</el-col>
			   </el-row>
			   <el-row type="flex" justify="space-between">
			       <el-col :span="11">
			   		<el-form-item label="植被平均高度(m)">
			   		    <el-input v-model="innerform.avgHeight" placeholder="植被平均高度(m)"></el-input>
			   		</el-form-item>
			   	</el-col>
			       <el-col :span="11">
			   		
			   		<el-form-item label="测量深度(cm)" prop="measuringDepth">
			   		    <el-input v-model="innerform.measuringDepth" placeholder="测量深度(cm)"></el-input>
			   		</el-form-item>
			   	</el-col>
			   </el-row>
			   <el-row type="flex" justify="space-between">
			       <el-col :span="11">
			   		<el-form-item label="土壤水分1" prop="soilMoisture1">
			   		    <el-input v-model="innerform.soilMoisture1" placeholder="土壤水分1"></el-input>
			   		</el-form-item>
			   	</el-col>
			       <el-col :span="11">
			   		<el-form-item label="土壤水分2" prop="soilMoisture2">
			   		    <el-input v-model="innerform.soilMoisture2" placeholder="土壤水分2"></el-input>
			   		</el-form-item>
			   		
			   	</el-col>
			   </el-row>
			  
			 <el-row type="flex" justify="space-between" >
			     <el-col :span="11">
			 		<el-form-item label="土壤水分3" prop="soilMoisture3">
			 		    <el-input v-model="innerform.soilMoisture3" placeholder="土壤水分3"></el-input>
			 		</el-form-item>
			 	</el-col>
			     <el-col :span="11">
			 		<el-form-item label="备注">
			 		    <el-input v-model="innerform.remark" placeholder="备注"></el-input>
			 		</el-form-item>
			 		
			 	</el-col>
			 </el-row>
		     
		    </el-form>
			<template #footer>
				<span  class="dialog-footer">
		      
			  <el-button type="primary" @click="saveEdit">确 定</el-button>
		  		</span>
			</template>
		</el-dialog>
    </div>
</template>

<script>

import moment from 'moment'
import { coverageviewlistCoverageTdrDetail,
coveragesaveaddCoverageTdrDetail,
coverageremovedelCoverageTdrDetail,
viewPageStationInfo } from '../../../api/index';

export default {
    name: 'zhibeiyubidutrdmingxi',
    data() {
        return {
			headers: {
			  Authorization: sessionStorage['token']
			},
			topInfo:{},
			status:'/',
			rules: {
			avgHeight: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  areaCode: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  frequency: [
								{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  imageLush: [
								{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  point: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  imageCoverage: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  visualLush: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  visualCoverage: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  visualGroundCover: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  measuringDepth: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  soilMoisture1: [
				{ required: true, message: '必填项', trigger: 'blur' }
			  ],
			  
			  soilMoisture2: [
			  				{ required: true, message: '必填项', trigger: 'blur' }
			  ]
			  ,
			  soilMoisture3: [
			  				{ required: true, message: '必填项', trigger: 'blur' }
			  ]
			},
			globalUser:[],
			logTitle2:'植被郁闭度信息',
			detaillog:false,
			innerTable:[],
			stationData:[],
			page:{
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				totalSize: 0
			},
            query: {
                tm: [],
                stname: ''
            },
			innerform:{},
			excelllog:false,
            formInline: {},
            tableData: [],
            selectData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            logTitle: '',
            pageTotal: 0,
            form: {
               
            },
           jingliujiangyuUrl:'',
		   nowsel:{},
		   xiaoqudata:[],
		   daoruUrl:''
        };
    },
    created() {
		this.daoruUrl =globalVar.jingliujiangyuUrl + "/soilWater/runoffField/record/coverage/import/importRecordTdr?headNo="+this.$route.query.recordNo;
		this.xiaoqudata=JSON.parse(sessionStorage.getItem('xiaoquxinxi'))
		
		this.status=this.$route.query.status
		this.topInfo={
			stnm:this.$route.query.stnm,
			observerName:this.$route.query.observerName,
			reviewerName:this.$route.query.reviewerName,
			obDate:moment(this.$route.query.obDate).format("YYYY年M月D日H时"),
		}
		this.globalUser=globalUser
        let that = this;
        that.getData();
		this.jingliujiangyuUrl=globalVar.jingliujiangyuUrl
		
    },
    methods: {
		filesuccess(e){
			if(e.code==5000){
				this.$message.error(e.object);
			}else{
				 this.$message.success("操作成功");
			}
			
			this.getData()
			
		},
		daochuexcell(){
			let headNo=this.$route.query.recordNo
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/record/coverage/export/exportTdrRecordData?stcd='+this.$route.query.stcd+'&year='+globalyear;
		},
		xiazaimuban(){
			let that=this
			window.location.href=globalVar.jingliujiangyuUrl+'/soilWater/runoffField/record/coverage/download/downloadTdrTemp'
			 
			
			this.$message.success('下载成功');
		},
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 0) {
			  if (rowIndex % 3 === 0) {
				return {
				  rowspan: 3,
				  colspan: 1
				};
			  } else {
				return {
				  rowspan: 0,
				  colspan: 0
				};
			  }
			}
		},
		prepage(){
			 this.$router.go(-1);
		},

		handleEdit(item){
			let that=this
			this.detaillogtitle=item?'编辑TDR详情':'新增TDR详情'
			this.detaillog=true
			this.innerform=item?item:{
				headNo:that.$route.query.recordNo
			}
		},

		getstationData() {
			let data={
				currentPage:1,
				pageSize:1000
			}
		    viewPageStationInfo(data).then((res) => {
		       
		        this.stationData = res.object.dataList.filter(item=>{
                    return item.stType==systype
                });
		       
		       
		    });
		},

       
        getData() {
			
			
			let that=this
			
			coverageviewlistCoverageTdrDetail({
				headNo:this.$route.query.recordNo
			}).then(e=>{
				that.tableData=e.object
				
			}).catch(err=>{
				console.log(err)
			})
			
			
			
        },
        // 触发搜索按钮
        handleSearch() {
           
            this.getData();
        },


		handleDelete(row){
			let detailData={
				detailNo:[row.detailNo],
				headNo:row.headNo
			}
			this.$confirm('确定要删除吗？', '提示', {
			    type: 'warning'
			})
			    .then(() => {
			        coverageremovedelCoverageTdrDetail(
						detailData
					).then((e) => {
			            this.$message.success('删除成功');
						
			            this.getData();
			        });
			    })
			    .catch(() => {});
		},
  

		// 保存编辑
		saveEdit() {
		    let that=this
		       this.$refs['innerform'].validate((valid) => {
		         if (valid) {
		       		coveragesaveaddCoverageTdrDetail

		       		([that.innerform]).then((e) => {
		       		    this.detaillog=false 
		       		    this.$message.success('操作成功');
		       		    that.getData();
		       		});
		         } else {
		       	
		       	return false;
		         }
		       });   
		       
		       
		    
		}
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>


